import React, {memo} from 'react';
import {View, Text, StyleSheet, StatusBar} from 'react-native';
import { normalize } from '../../utils/adapter';



type LeftProps = {
  isHideLeft?: boolean;
};

type RightProps = {
  isHideRight?: boolean;
};

type ContentProps = {
  isHideContent?: boolean;
  title?: string;
};

type Props = {backgroundColor?: string} & LeftProps & RightProps & ContentProps;

const statusBarHeight = StatusBar.currentHeight as number;

const Left = memo(function ({isHideLeft}: LeftProps) {
  const renderLeft = () => {
    return (
      <View>
        <Text>left</Text>
      </View>
    );
  };

  return <View style={styles.nav_left}>{!isHideLeft && renderLeft()}</View>;
});

const Right = memo(function ({isHideRight}: RightProps) {
  const renderRight = () => {
    return (
      <View>
        <Text>right</Text>
      </View>
    );
  };
  return <View style={styles.nav_right}>{!isHideRight && renderRight()}</View>;
});

const Content = memo(function ({isHideContent, title}: ContentProps) {
  const renderContent = () => {
    return (
      <View>
        <Text style={styles.title_text}>{title}</Text>
      </View>
    );
  };

  return (
    <View style={styles.nav_content}>{!isHideContent && renderContent()}</View>
  );
});

function Header({
  isHideLeft = false,
  isHideRight = false,
  isHideContent = false,
  title,
  backgroundColor = '#fff',
}: Props) {


  return (
    <View style={[styles.nav_header_container, {backgroundColor}]}>
      <Left isHideLeft={isHideLeft} />
      <Content isHideContent={isHideContent} title={title} />
      <Right isHideRight={isHideRight} />
    </View>
  );
}

const styles = StyleSheet.create({
  nav_header_container: {
    height:normalize(54 + statusBarHeight),
    paddingTop:normalize(statusBarHeight),
    flexDirection: 'row',
  },
  nav_left: {
    paddingHorizontal:normalize(10),
    width: normalize(100),
    justifyContent: 'center',
    alignItems: 'flex-start',
  },
  nav_right: {
    paddingHorizontal: normalize(10),
    width: normalize(100),
    justifyContent: 'center',
    alignItems: 'flex-end',
  },
  nav_content: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title_text: {
    color: '#333333',
    fontWeight: 'bold',
    fontSize: normalize(18),
  },
});

export default Header;
